<template>
  <div class="majority"> <!--与tabbar一级的-->
    <div class="operator">
      <el-input v-model="input" style="width: 240px;height: 34px;margin: 0 20px 0 20px" placeholder="Please input" />
      <el-button type="success" :icon="Search" @click="searchItem(input)">查询</el-button>
      <el-button type="success" :icon="Plus" @click="examAdd(input)">体检信息</el-button>
    </div>
    <div class="tableList">
      <el-table
          stripe
          border
          ref="multipleTableRef"
          :data="currentTableData"
          style="width: 100%;margin-left: 20px"
          @selection-change="handleSelectionChange"
      >
        <!--          选项改变时触发函数-->
        <el-table-column type="selection" width="55" />
        <el-table-column property="reId" label="id"  />
        <el-table-column property="sId" label="学生id" />
        <el-table-column property="rId" label="报名id" />
        <el-table-column property="reDate" label="报名日期"/>
        <el-table-column property="reAccept" label="状态"  >
          <template #default="scope">
            <label v-if="scope.row.reAccept==='0'">未接受</label>
            <label v-if="scope.row.reAccept==='1'">已接受</label>
            <label v-if="scope.row.reAccept==='2'">已拒绝</label>
          </template>
        </el-table-column>
        <el-table-column property="operator" label="操作" >
          <template #default="scope">
            <el-button size="small" @click="handleEdit( scope.row)">
              同意
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete( scope.row)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :small="false"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="totalItems"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="个人信息" width="40%">
    <el-form :model="form">
      <el-form-item label="名称:" :label-width="formLabelWidth">
        <el-input v-model="form.rName"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别:" :label-width="formLabelWidth">
        <el-input v-model="form.rSex"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄:" :label-width="formLabelWidth">
        <el-input v-model="form.rAge"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="籍贯:" :label-width="formLabelWidth">
        <el-input v-model="form.rNative"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="民族:" :label-width="formLabelWidth">
        <el-input v-model="form.rRace"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话:" :label-width="formLabelWidth">
        <el-input v-model="form.rTel"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证:" :label-width="formLabelWidth">
        <el-input v-model="form.rCertificate"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="住址:" :label-width="formLabelWidth">
        <el-input v-model="form.rAddress"  autocomplete="off" />
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogVisible2" title="体检信息" width="30%">
    <el-form :model="form1">
      <el-form-item label="id" :label-width="40" >
        <el-input v-model="form1.sId"  autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="色盲" :label-width="40">
        <el-select
            v-model="form1.eDaltonism"
            placeholder="Select"
            size="large"
            style="width: 320px"
        >
          <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="视力" :label-width="40">
        <el-select
            v-model="form1.eVision"
            placeholder="Select"
            size="large"
            style="width: 320px"
        >
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="四肢" :label-width="40">
        <el-select
            v-model="form1.eImp"
            placeholder="Select"
            size="large"
            style="width: 320px"
        >
          <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="this.dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="add">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {Search,Plus,Delete} from "@element-plus/icons-vue";
</script>
<script>
import {ref} from "vue";
import request from "@/util/request";
import {ElMessage} from "element-plus";
export default {
  name: "JudgeEnroll",
  data(){
    return{
      formLabelWidth:60,
      form:{
        rName: '',
        rSex: '',
        rAge: '',
        rCertificate: '',
        rNative: '',
        rRace: '',
        rTel: '',
        rAddress: ''
      },
      form1:{
        sId:ref(''),
        eVision:ref(''),
        eDaltonism:ref(''),
        eImp:ref(''),
      },
      options1:ref([
        {
          value:0,
          label:"正常"
        },
        {
          value:1,
          label:"红绿色盲"
        },
        {
          value:2,
          label:"黄蓝色盲"
        },
      ]),
      options2:ref([
        {
          value:5.0,
          label:"正常"
        },
        {
          value:4.8,
          label:"不通过"
        },
      ]),
      options3:ref([
        {
          value:0,
          label:"不通过"
        },
        {
          value:1,
          label:"正常"
        },
      ]),
      dialogVisible:ref(false),
      dialogVisible2:ref(false),
      input:ref(""),
      tableData:[],
      currentTableData:[],
      totalItems:ref(0),
      currentPage:ref(1),
      pageSize:ref(7),
    }
  },
  methods:{
    examAdd(input){

      if(input!==''){
        request.post("/api/download?id="+input).then(res=>{
          console.log(res)
          if(res===1){
            ElMessage.success("下载成功")
          }

        })
      }
      this.form1.sId=input
    },
    add(){
      request.post("/api/exam/insert",this.form1).then(res=>{
        ElMessage.success("成功")
        this.dialogVisible2=false
        this.input=''
      })
    },
    searchItem(input){
      if(input===''){
        this.getData()
      }else{
        request.post("/api/RegistrationForm/getone?rId="+input).then(res=>{
          //获得信息，赋值给form
          this.form=res.data
          this.input=""
          console.log("找到了")
          this.dialogVisible=true
        })
      }
    },
    getData(){
      request.post("/api/registerRecord/getByReAccept").then(res=>{
        if(res!=null){
          this.tableData=res
          this.currentPage=1
          this.totalItems=this.tableData.length
          this.currentTableData = this.tableData.filter((item, index) => index < this.pageSize)
        }
        //看返回值是否需要加data   ****注意
      })
    },
    handleSelectionChange(val){
      console.log("选择的值为：")
      console.log(val)
    },
    handleEdit(row){
      let data={
        reId:row.reId,
        reAccept:1
      }
      request.post("/api/registerRecord/update",data).then(res=>{
        ElMessage.success("成功")
        this.getData()
      })
    },
    handleDelete(row){
      let data={
        reId:row.reId,
        reAccept:2
      }
      request.post("/api/registerRecord/update",data).then(res=>{
        ElMessage.success("成功")
        this.getData()
      })
    },
    handleCurrentChange(page){
      this.currentPage=page
      const index = this.pageSize * (page - 1)
      const nums = this.pageSize * page
      const tables = []
      for (let i = index; i < nums; i++) {
        if (this.tableData[i]) tables.push(this.tableData[i])  //看看这里
      }
      this.currentTableData = tables
    },
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.majority{
  width: 100%;
  height: 80vh;
}
.operator{
  display: flex;
  width: 100%;
  height: 10vh;
}
.tableList{
  width: 100%;
  height: 60vh;
}
.demo-pagination-block{
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>